<template>
  <div class="ShopMall" style="display: none;">
    <div class="title">
      <div>CS GO</div>
    </div>
    <div class="ShopMall-cent">
      <div class="ShopMall-left">
        <div class="search-box">
          <div>价格综合排列</div>
          <div class="search-input">
            <input type="" name="" id="" value="" placeholder="输入最低价格"/>-<input type="" name="" id="" value="" placeholder="输入最高价格"/>
            <div class="search-btn">搜索</div>
          </div>
        </div>
        <div >
          <ul class="commodity-box">
            <li class="activ">
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
            <li>
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
            <li>
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
            <li>
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
            <li>
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
            <li>
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
            <li>
              <div><img src="../assets/gun1.png" ></div>
              <div>
                <p>M4A4 I 龙王（略有磨损）</p>
                <p><span>2808.47</span><span>1件</span></p>
              </div>
            </li>
          </ul>
        </div>
        <div>465794</div>
      </div>
      <div class="ShopMall-right">
          <div class="right-title">已经选择</div>
          <ul class="right-cent">
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <p>M4A4 I 龙王ffsfsdff</p>
                  <p>(略有磨损)</p>
                </div>
                <div><img src="../assets/gun1.png" ></div>
              </div>
              <div class="ckeck">
                <span>88.8</span>
                <div><p>-</p>1<p>+</p></div>
              </div>
            </li>
          </ul>
          <div class="count-box">
            <p>已选件数:<span class="c_f">2</span></p>
            <p>已选合计:<span class="c_FFA22A">2999.99</span></p>
            <div class="count-btn">
              <div>取消</div>
              <div>购买</div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
   data () {
      return {

      }
    },
    methods: {

    },
  }
</script>

<style scoped>
  .count-btn>div{
    width: 100px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
  }
  .count-btn>div:first-child{
    background-color: #1D71AD;
    color: #FFFFFF;
  }
  .count-btn>div:nth-child(2){
    background-color: #FFA22A;
  }
  .count-btn{
    display: flex;
    justify-content: space-between;
    margin: 20px 0px 0;
  }
  .count-box>p{
    font-size: 16px;
    color: #999999;
    padding-left: 15px;
    text-align: left;
    margin-bottom: 5px;
  }
  .count-box>p span{
    margin-left: 15px;
    font-weight: bold;
    font-size: 18px;
  }
  .c_f{
    color:#FFFFFF ;
  }
  .c_FFA22A{
    color: #FFA22A;
  }
  .count-box{
    width: 100%;
    background:#14263E;
    margin-top: 15px;
    padding: 20px 0 0;
  }
  .right-cent li .ckeck{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #56D8FF;
    margin-top: 7px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .right-cent li .ckeck>div{
    display: flex;
    width: 80px;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    background-color: #223D5E;
  }
  .right-cent li .ckeck>div>p{
    width: 21px;
    height: 21px;
    line-height: 21px;
    background-color: #039AC7;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
  }
  .right-cent li>div:first-child>div:nth-child(2){
    position: relative;
    width: 130px;
    height: 90px;
  }
  .right-cent li>div:first-child>div:nth-child(2) img{
    width:  auto;
    height: auto;
    max-width: 130px;
    max-height: 90px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .right-cent li>div:first-child>div:first-child>p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-bottom: 10px;
  }
  .right-cent li>div:first-child>div:first-child{
    width: 80px;
    font-size: 12px;
    color: #59C2FE;
  }
  .right-cent li>div:first-child{
    width: 100%;
    height: 95px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
  }
  .right-cent li{
    width: 100%;
    height: 127px;
    background-image: url(../assets/ShopMall_list-right_bg.png);
    background-size: 100% 100%;
  }
  .right-cent::-webkit-scrollbar {
       width: 0 !important;
     }
   .right-cent::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
  .right-cent{
    width: 100%;
    height: 520px;
    overflow-y: scroll;
  }
  .ShopMall-right{
    padding: 0 14px 15px 12px;
    box-sizing: border-box;
  }
  .ShopMall-right .right-title{
    height: 60px;
    line-height: 60px;
    color: #D0EEFF;
    font-size: 18px;
  }
  .commodity-box .activ{
    background-image: url(../assets/ShopMall_list_bgs.png);
  }
  .commodity-box .activ>div:nth-child(2)>p:first-child{
    color: #FFE095;
  }
  .commodity-box li>div:nth-child(2)>p:nth-child(2){
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #FFFFFF;
    margin-top: 3px;
  }
  .commodity-box li>div:nth-child(2)>p:first-child{
    text-align: left;
    color: #76DAFF;
    font-size: 14px;
  }
  .commodity-box li>div:nth-child(2){
    margin: 5px auto;
    width: 196px;
    height: 40px;
  }
  .commodity-box li>div:first-child{
    width: 196px;
    height: 110px;
    margin: 10px auto;
    position: relative;
  }
  .commodity-box li>div:first-child img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 196px;
    max-height: 110px ;
    transform: translate(-50%, -50%);
  }
  .commodity-box li{
    width: 217px;
    height: 175px;
    background-image: url(../assets/ShopMall_list_bgs.png);
    background-size: 100% 100%;
    margin-right: 12px;
    margin-bottom: 16px;
    cursor: pointer;
  }
  .commodity-box li:nth-child(4n){
    margin-right: 0px;
  }
  .commodity-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 29px;
    height: 600px;
  }
  .search-btn{
    width: 88px;
    height: 36px;
    line-height: 36px;
    background-color: #E59328;
    color: #000000;
    cursor: pointer;
  }
  .search-input{
    display: flex;
    align-items: center;
    background-color: #222833;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
  }
  .search-input input{
    background-color: #222833;
    border:none;
    height: 36px;
    font-size: 16px;
    outline: none;
    width: 140px;
    color: #939CAB;
    text-align: center;
  }
  .search-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #939CAB;
  }
  .ShopMall-right{
    width: 260px;
    background: rgba(20, 38, 62, 0.64);
  }
  .ShopMall-left{
    width: 940px;
    padding: 33px 18px;
    box-sizing: border-box;
  }
  .ShopMall-cent{
    display: flex;
  }
  .ShopMall{
    width: 1200px;
    margin:  0 auto;
    background-color: #0E1421;
    padding-top: 36px;
  }
  .ShopMall .title{
    background-color: #242C40;
  }
  .ShopMall .title >div{
    height: 51px;
    width: 197px;
    background-image: url(../assets/bk-tal1-bgs.png);
    background-size: 100% 100%;
    line-height: 51px;
    font-weight: bold;
  }
</style>
